<template>
	<view class="box">
		<img class="box-bg-url" src="../../static/img/indexBg2.png" />
		<view class="detail-box detail1">
			<img class="detail-box-img" src="../../static/img/detailBtn.png" @click="detaiClick(1)" />
			<img class="detail-box-img" src="../../static/img/buyBtn.png" @click="buyClick(1)" />
		</view>
		<div class="type1">{{typeStr1}}</div>
		<view class="detail-box detail2">
			<img class="detail-box-img" src="../../static/img/detailBtn.png" @click="detaiClick(2)" />
			<img class="detail-box-img" src="../../static/img/buyBtn.png" @click="buyClick(2)" />
		</view>
		<div class="type2">{{typeStr2}}</div>
		<!-- <view class="detail-box detail3">
			<img class="detail-box-img" src="../../static/img/detailBtn.png" @click="detaiClick(3)" />
			<img class="detail-box-img" src="../../static/img/buyBtn.png" @click="buyClick(3)" />
		</view>
		<div class="type3">{{typeStr3}}</div> -->
		<view class="time-box">
			<text>即日起<text class="time-box-red">至2025年05月31日</text></text>
			<text> <text class="tip">特殊事项说明:最终解释权归真功夫所有</text></text>
		</view>
		<img src="../../static/img/ckqm.png" class="ckqm" @click="goCode" />
		<img src="../../static/img/addressBtn.png" class="addressBtn" @click="goAddress" />
		<view class="bottom-box">
			<view class="bot-box">
				<div class="bot-box-title">
					售后服务
				</div>
				<div class="bot-box-item">
					<text>小福券客户在此页面</text>
					<text>领取权益后到店核销</text>
					<text>即享受优惠</text>
				</div>
			</view>
			<view class="bot-box">
				<div class="bot-box-title">
					售后服务
				</div>
				<div class="bot-box-item">
					<text>如有疑问可致电客服：</text>
					<text>15767576025</text>
					<text>售后说明：</text>
					<text>下单后未使用可联系</text>
					<text>
						客服申请退款
					</text>
				</div>
			</view>
		</view>
		<view class="copy-right">
			<view>©2017-2022广州彩讯数字技术有限公司</view>
			<view>粤ICP备17090306号 </view>
		</view>
		<modalDetailVue :type="detailType" v-if="showModalDetai" @close="showModalDetai = false" @buy="buy" />
	</view>
</template>

<script>
	const detailList = [{
			name: '嫩滑瘦肉粉',
			zy: '原价12.5元，小福券会员价9元',
			sxfs: '立即生效',
			time: '早餐7：00-10：00（以门店实际营业时间为准）',
			rhsy: '支付后凭券码到店核销',
			productId: '1794886583057518592',
		},
		{
			name: '冬（香）菇鸡腿肉菜+四季猪骨汤+原盅蒸饭',
			zy: '原价32元，小福券会员价21元',
			sxfs: '立即生效',
			time: '正餐：10：30-20:30（以门店实际营业时间为准）',
			rhsy: '支付后凭券码到店核销',
			productId: '1794886653576351744',
		},
		{
			name: '排骨拼鸡腿肉菜+冬（香）菇鸡腿肉菜+2份四季猪骨汤+香滑蒸蛋+2份原盅蒸饭',
			zy: '原价75.5元，小福券会员价49元',
			sxfs: '立即生效',
			time: '正餐：10：30-20:30（以门店实际营业时间为准）',
			rhsy: '支付后凭券码到店核销',
			productId: '1794886686421946368',
		},
	]
	import modalDetailVue from './component/modalDetail.vue'
	export default {
		components: {
			modalDetailVue,
		},
		data() {
			return {
				detailType: '',
				showModalDetai: false,
				typeStr1: '',
				typeStr2: '',
				typeStr3: '',
			}
		},
		onHide() {
			console.log('onHide')
			// if(this.timer) clearInterval(this.timer) 
		},
		async onShow() {
			// console.log('onShow')
			// this.userCode = await this.getUserCode()
			// console.log(this.userCode, '==.>')
			// this.timer = setInterval(async () => {
			// 	this.userCode = await this.getUserCode()
			// 	console.log(this.userCode, '倒计时刷新userCode')
			// }, 240000)
			this.getGoodListType()
		},
		async onLoad(option) {
			console.log(option, 'option=====>test')
			const p = wx.getStorageSync('NODE_ENV')
			this.api = p == 'prod' ? 'https://qy.mtasia.net/wph5api_zgfqy' : 'https://qy.mtasia.net/wph5api_dev'
			// uni.showToast({
			// 	title: option.recode,
			// 	icon: 'none'
			// })


			uni.showLoading({
				mask: true
			})
			this.recode = option.recode || ''
			uni.request({
				url: this.api + '/dg/zgfqy/userLogin/getCmccPhone.do',
				method: 'POST',
				data: {
					recode: this.recode,
				},
				success: res => {
					console.log(res, res.data, '获取token')
					uni.hideLoading()
					if (res.data.code == 200) {
						wx.setStorageSync('token', res.data.data.access_token)
					} else {
						// uni.showToast({
						// 	title: res.data.message,
						// 	icon: 'none',
						// 	duration: 3000,
						// })
					}
				},
				fail: err => {
					uni.showToast({
						title: err.errMsg
					})
					uni.hideLoading()
					console.log(err)
				}
			})
		},
		methods: {
			getGoodListType() {
				uni.request({
					url: this.api + '/dg/zgfqy/h5/queryProductByCode',
					method: 'GET',
					header: {
						Authorization: wx.getStorageSync('token'),
					},
					data: {},
					success: res => {
						// res = {}
						// res.data = {
						// 	"code": "200",
						// 	"message": "成功",
						// 	"data": [{
						// 			"flag": "2",
						// 			"productId": "1794886583057518592"
						// 		},
						// 		{
						// 			"flag": "2",
						// 			"productId": "1794886653576351744"
						// 		},
						// 		{
						// 			"flag": "2",
						// 			"productId": "1794886686421946368"
						// 		}
						// 	]
						// }
						// console.log(res, 'test==>')
						if (res.data.code == 200) {
							const data = res.data.data
							this.data = data;
							detailList.forEach((item, index) => {
								data.forEach(i => {
									if (item.productId == i.productId) {
										const typeObj = {
											'0': '即将售罄',
											'1': '', // 大于10张
											'2': '已售罄'
										}
										let key = `typeStr${index + 1}`
										this[key] = typeObj[i.flag]
									}
								})
							})
						}
					},
					fail: err => {
						uni.hideLoading()
					}
				})
			},
			getUserCode() {
				return new Promise((resovle, rej) => {
					uni.login({
						success: (res) => {
							const userCode = res.code;
							if (userCode) {
								setTimeout(() => {
									resovle(userCode)
								}, 2000)
							} else {
								rej()
							}
						},
						fail: (err) => {
							uni.showToast({
								icon: 'none',
								title: 'wx.login获取用户code失败,' + err.errMsg,
								duration: 3000
							})
							rej(err)
						}
					})
				})
			},
			detaiClick(type) {
				this.detailType = type
				this.showModalDetai = true;
			},
			getPaySign() {},
			async buyClick(type) {
				console.log(this.data)
				const productId = detailList[type - 1].productId;
				if(!this.data) return;
				const findData = this.data.find(i => i.productId == productId)
				console.log(findData, 'findData')
				if(findData && findData.flag == 2) {
					uni.showToast({
						title: '已售罄',
						duration: 3000,
						icon: 'none'
					})
					return
				}
				// return;
				// uni.showModal({
				// 	title: '',
				// 	content: '活动升级中，敬请期待！',
				// 	showCancel: false
				// })
				// return;
				uni.showLoading({
					mask: true
				})
				try {

					
					const token = wx.getStorageSync('token')
					const code = await this.getUserCode()
					uni.request({
						url: this.api + '/dg/zgfqy/h5/order',
						header: {
							Authorization: wx.getStorageSync('token'),
						},
						data: {
							productId,
							code,
						},
						method: "POST",
						success: res => {
							console.log(res.data)
							uni.hideLoading()
							if (res.data.code == 200) {
								this.getPay(res.data.data)
							} else {
								uni.showToast({
									title: res.data.message,
									icon: 'none'
								})
							}
						},
						fail: err => {
							uni.hideLoading()
							console.log(err)
						}
					})
				} catch (err) {
					console.log(err)
					uni.hideLoading()
				}

			},
			getPay(res) {
				// uni.showLoading({
				// 	mask: true,
				// })
				console.log(res)
				wx.requestPayment({
					timeStamp: res.timeStamp,
					nonceStr: res.nonceStr,
					package: res.package,
					signType: 'RSA',
					paySign: res.paySign,
					success: res => {
						console.log(res)
						uni.navigateTo({
							url: '/pages/code/code'
						})
					},
					fail(res) {}
				})
			},
			buy(type) {
				this.buyClick(type)
			},
			goCode() {
				uni.showLoading({

				})
				uni.request({
					url: this.api + '/dg/zgfqy/h5/queryUserOrderStatus',
					method: 'GET',
					header: {
						Authorization: wx.getStorageSync('token'),
					},
					data: {},
					success: res => {
						uni.hideLoading()
						console.log(res.data)
						if (res.data.code == 200 && res.data.data == 0) {
							uni.navigateTo({
								url: '/pages/code/code'
							})
						} else {
							uni.showToast({
								title: '您暂无券码',
								duration: 3000,
								icon: 'none'
							})
						}
					},
					fail: err => {
						uni.hideLoading()
					}
				})

			},
			goAddress() {
				uni.navigateTo({
					url: '/pages/address/address'
				})
			}
		}
	}
</script>

<style>
	.box {
		width: 750rpx;
		height: 2179rpx;
		position: relative;
		background: #fff8e5;
	}

	.box-bg-url {
		width: 100%;
		height: 2119rpx;
	}

	.detail-box {
		display: flex;
		position: absolute;
	}

	.detail-box-img {
		width: 140rpx;
		height: 53rpx;
		margin-right: 10rpx;
	}

	.detail1 {
		top: 672rpx;
		left: 352rpx;
	}

	.detail2 {
		top: 1056rpx;
		left: 352rpx;
	}

	.detail3 {
		top: 1085rpx;
		left: 352rpx;
	}

	.time-box {
		width: 100%;
		text-align: center;
		position: absolute;
		top: 1333rpx;
		display: flex;
		flex-direction: column;
		font-size: 27rpx;
		color: #000000;
		font-weight: bold;
	}

	.time-box-red {
		color: #FC623E;
		padding-left: 10rpx;
	}

	.tip {
		color: #5D5D5D;
		font-size: 22rpx;
		padding-top: 8rpx;
		font-weight: normal;
	}

	.ckqm {
		position: absolute;
		top: 1524rpx;
		left: 248rpx;
		width: 255rpx;
		height: 80rpx;
	}

	.bottom-box {
		width: 694rpx;
		height: 236rpx;
		background: #FFD950;
		border-radius: 16rpx;
		border: 4px solid #FEEFC8;
		position: absolute;
		top: 1840rpx;
		left: 28rpx;
		display: flex;
	}

	.bot-box {
		width: 50%;
		height: 100%;
		text-align: center;
	}

	.bot-box-title {
		font-weight: bold;
		font-size: 30rpx;
		font-weight: bold;
		padding-top: 20rpx;
		padding-bottom: 10rpx;
	}

	.bot-box-item {
		font-size: 22rpx;
		text-align: left;
		display: flex;
		flex-direction: column;
		margin-left: 68rpx;
	}

	.copy-right {
		font-size: 18rpx;
		width: 100%;
		text-align: center;
		bottom: 30rpx;
		position: absolute;
		left: 0;
	}

	.addressBtn {
		width: 255rpx;
		height: 80rpx;
		position: absolute;
		top: 1740rpx;
		left: 248rpx;
	}

	.type1 {
		font-size: 22rpx;
		position: absolute;
		right: 80rpx;
		top: 558rpx;
		color: #FC623E;
		font-weight: bold;
	}

	.type2 {
		font-size: 22rpx;
		position: absolute;
		right: 80rpx;
		top: 782rpx;
		color: #FC623E;
		font-weight: bold;
	}

	.type3 {
		font-size: 22rpx;
		position: absolute;
		right: 80rpx;
		top: 1048rpx;
		color: #FC623E;
		font-weight: bold;
	}
</style>